<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box{
        width: 400px;
        height: 400px;
        background-color: aquamarine;
    }
    .box1{
        width: 300px;
        height: 300px;
        background-color: rgb(117, 90, 213);
    }
    .box2{
        width: 100px;
        height: 200px;
        background-color: rgb(154, 179, 42);
    }
    </style>
</head>
<body>
    <div class="box">
        box
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
<script>
    var box=document.getElementsByClassName('box')[0];
    var box1=document.getElementsByClassName('box1')[0];
    var box2=document.getElementsByClassName('box2')[0];
    //为true时,在捕获阶段就会执行,不用经过冒泡阶段,所以阻止冒泡对此事件不会有影响
    box.addEventListener('click',function(e){
        console.log('点击了父元素');
    },true);
    box1.addEventListener('click',function(e){
        console.log('点击了box1');
    });
    box2.addEventListener('click',function(e){
        console.log('点击了box2');
        //阻止元素冒泡
        //在找到目标元素之后,执行事件,停止向上执行所有事件
        e.stopPropagation();
    });
</script>
</html>